<template>
	<view class="address flex_c">
		<view class="nav_bar_nofixed" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="推广地区" :border='false' :fixed="false"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>


		<view class="select_area">
			<view class="title flex_r_between">
				<text>当前选择</text>
				<view @click="onChoose">完成({{areaSelect.length}})</view>
			</view>
			<scroll-view scroll-y="true" style="height: 16vh;">
				<u-empty v-if="!areaSelect.length" text="请选择推广区域  默认全国" mode="list"
					:icon="$util.prefix('/public/empty.png')">
				</u-empty>
				<view class="select_list flex_center">
					<view class="select_item flex_r_around" v-for="(item,index) in areaSelect" :key="index"
						@click="onAreaDetele(index)">
						<view class="item_name">{{item.areaName}}</view>
						<view class="item_icon">
							<u-icon name="close-circle-fill" size="28rpx" color="#FD2A53"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="content">
			<view class="list list1">
				<scroll-view scroll-y="true">
					<view class="item flex_r_between" v-for="(item,index) in provinceList" :key="index"
						@click="onProvince(index)" :id="haveProvince(index) ? 'select' : ''">
						<text class="hidden">{{item.areaName}}</text>
						<image :src="`/static/public/select${haveProvince(index) ? '_s' : ''}.png`"
							@click="onProvinceChoose(index)"></image>
					</view>
				</scroll-view>
			</view>

			<view class="list list2">
				<scroll-view scroll-y="true">
					<view class="item flex_r_between" v-for="(item,index) in cityList" :key="index"
						:id="haveCity(index) ? 'select' : ''" @click="onCity(index)">
						<text class="hidden">{{item.areaName}}</text>
						<image :src="`/static/public/select${haveCity(index) ? '_s' : ''}.png`"
							@click="onCityChoose(index)"></image>
					</view>
				</scroll-view>
			</view>

			<view class="list list3">
				<scroll-view scroll-y="true">
					<view class="item flex_r_between" v-for="(item,index) in areaList" :key="index"
						:id="haveArea(index) ? 'select' : ''" @click="onAreaChoose(index)">
						<text class="hidden">{{item.areaName}}</text>
						<image :src="`/static/public/select${haveArea(index) ? '_s' : ''}.png`"></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				provinceList: [],
				cityList: [],
				areaList: [],

				provinceSelect: [],
				citySelect: [],
				areaSelect: [],
			}
		},
		methods: {
			// 获取省市区数据
			getAddressList() {
				this.$post('index/area').then(res => {
					this.provinceList = res.data;
					this.cityList = this.provinceList[0].child;
					this.areaList = this.cityList[0].child;
				})
			},

			// 点击省标签
			onProvince(index) {
				this.cityList = this.provinceList[index].child;
				this.areaList = this.cityList[0].child;
			},

			// 点击市标签
			onCity(index) {
				this.areaList = this.cityList[index].child;
			},

			// 选中省
			onProvinceChoose(index) {
				var flag = this.provinceSelect.find(element => element.areaCode == this.provinceList[index].areaCode) !==
					undefined;
				if (!flag) {
					var total = 0;
					this.provinceList[index].child.forEach((element) => {
						element.child.forEach((e) => {
							total++;
						});
					});
					if ((total + this.areaSelect.length) > 100) {
						return this.$util.msg('最多选择一百个地区');
					}

					this.provinceSelect.push(this.getItem(this.provinceList[index]))

					for (var i = 0; i < this.provinceList[index].child.length; i++) {
						var element = this.provinceList[index].child[i];
						var flag2 = this.citySelect.find(city => city.areaCode == element.areaCode) == undefined;
						if (flag2) {
							this.citySelect.push(this.getItem(element));
						}

						for (var j = 0; j < element.child.length; j++) {
							var value = element.child[j];
							var flag3 = this.areaSelect.find(area => area.areaCode == value.areaCode) == undefined;
							if (flag3) {
								this.areaSelect.push(this.getItem(value));
							}
						}
					}

				} else {
					this.provinceSelect = this.provinceSelect.filter((element) => {
						return element.areaCode != this.provinceList[index].areaCode; // 保留值小于或等于 10 的元素
					});

					this.provinceList[index].child.forEach(element => {
						this.citySelect = this.citySelect.filter(item => item.areaCode != element.areaCode);
						element.child.forEach(value => {
							this.areaSelect = this.areaSelect.filter(item => item.areaCode != value
								.areaCode);
						});
					});
				}
			},

			// 选择市
			onCityChoose(index) {
				var flag = this.citySelect.find(element => element.areaCode == this.cityList[index].areaCode) !==
					undefined;
				var province = {};
				this.provinceList.forEach((element) => {
					element.child.forEach((e) => {
						if (this.cityList[index].areaCode == e.areaCode) {
							province = element;
						}
					});
				});

				if (!flag) {
					var total = 0;
					this.cityList[index].child.forEach((element) => {
						total++;
					});
					if ((total + this.areaSelect.length) > 100) {
						return this.$util.msg('最多选择一百个地区');
					}

					this.citySelect.push(this.getItem(this.cityList[index]));

					var flag3 = this.provinceSelect.find(element => element.areaCode == province.areaCode) !== undefined;
					if (!flag3) {
						this.provinceSelect.push(this.getItem(province));
					}

					this.cityList[index].child.forEach(element => {
						var flag2 = this.areaSelect.find(area => area.areaCode == element.areaCode) == undefined;
						if (flag2) {
							this.areaSelect.push(this.getItem(element));
						}
					});
				} else {
					this.citySelect = this.citySelect.filter(item => item.areaCode != this.cityList[index].areaCode);
					this.cityList[index].child.forEach(value => {
						this.areaSelect = this.areaSelect.filter(item => item.areaCode != value.areaCode);
					});

					// 删除省
					var provinceFlag = false;
					province.child.forEach(element => {
						this.citySelect.forEach(el => {
							if (element.areaCode == el.areaCode) {
								provinceFlag = true;
							}
						})
					})
					if (!provinceFlag) {
						this.provinceSelect = this.provinceSelect.filter(item => item.areaCode != province.areaCode);
					}
				}
			},

			// 选择区
			onAreaChoose(index) {
				var flag = this.areaSelect.find(element => element.areaCode == this.areaList[index].areaCode) !==
					undefined;

				var province = {};
				var city = {};

				this.provinceList.forEach(element => {
					element.child.forEach(i => {
						i.child.forEach(e => {
							if (e.areaCode == this.areaList[index].areaCode) {
								province = element;
								city = i;
							}
						});

					})
				});

				if (!flag) {
					if (this.areaSelect.length > 99) {
						return this.$util.msg('最多选择一百个地区');
					}
					this.areaSelect.push(this.getItem(this.areaList[index]));

					var flag2 = this.citySelect.find(element => element.areaCode == city.areaCode) !== undefined;
					if (!flag2) {
						this.citySelect.push(this.getItem(city));
					}

					var flag3 = this.provinceSelect.find(element => element.areaCode == province.areaCode) !== undefined;
					if (!flag3) {
						this.provinceSelect.push(this.getItem(province));
					}
				} else {
					this.areaSelect = this.areaSelect.filter(item => item.areaCode != this.areaList[index].areaCode);
					// 删除市
					var cityFlag = false;
					city.child.forEach(element => {
						this.areaSelect.forEach(el => {
							if (element.areaCode == el.areaCode) {
								cityFlag = true;
							}
						})
					})
					if (!cityFlag) {
						this.citySelect = this.citySelect.filter(item => item.areaCode != city.areaCode);
					}

					// 删除省
					var provinceFlag = false;
					province.child.forEach(element => {
						this.citySelect.forEach(el => {
							if (element.areaCode == el.areaCode) {
								provinceFlag = true;
							}
						})
					})
					if (!provinceFlag) {
						this.provinceSelect = this.provinceSelect.filter(item => item.areaCode != province.areaCode);
					}

				}
			},

			onAreaDetele(index) {
				var province = {};
				var city = {};
				this.provinceList.forEach(element => {
					element.child.forEach(i => {
						i.child.forEach(e => {
							if (e.areaCode == this.areaSelect[index].areaCode) {
								province = element;
								city = i;
							}
						});

					})
				});
				this.areaSelect = this.areaSelect.filter(item => item.areaCode != this.areaSelect[index].areaCode);
				// 删除市
				var cityFlag = false;
				city.child.forEach(element => {
					this.areaSelect.forEach(el => {
						if (element.areaCode == el.areaCode) {
							cityFlag = true;
						}
					})
				})
				if (!cityFlag) {
					this.citySelect = this.citySelect.filter(item => item.areaCode != city.areaCode);
				}

				// 删除省
				var provinceFlag = false;
				province.child.forEach(element => {
					this.citySelect.forEach(el => {
						if (element.areaCode == el.areaCode) {
							provinceFlag = true;
						}
					})
				})
				if (!provinceFlag) {
					this.provinceSelect = this.provinceSelect.filter(item => item.areaCode != province.areaCode);
				}
			},

			haveProvince(index) {
				var flag = this.provinceSelect.find(element => element.areaCode == this.provinceList[index].areaCode) !==
					undefined;
				return flag;
			},

			haveCity(index) {
				var flag = this.citySelect.find(element => element.areaCode == this.cityList[index].areaCode) !==
					undefined;
				return flag;
			},

			haveArea(index) {
				var flag = this.areaSelect.find(element => element.areaCode == this.areaList[index].areaCode) !==
					undefined;
				return flag;
			},

			getItem(data) {
				return {
					areaCode: data.areaCode,
					areaId: data.areaId,
					areaName: data.areaName,
					center: data.center,
				};
			},

			onChoose() {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('getAddress', {
					address: this.areaSelect
				});
				this.$util.back();
			}
		},

		onLoad() {
			this.getAddressList();
			// const eventChannel = this.getOpenerEventChannel();
			// eventChannel.on('defultAddress', data => {
			// 	console.log(data,'接受');
			// 	this.areaSelect = data;
			// })
		}
	}
</script>

<style lang="less" scoped>
	.address {
		height: 100vh;
		padding-top: var(--paging-head-top);
		background: #FFF;

		.nav_bar_nofixed {
			background: #FFF;
			height: 44px;
			width: 100vw;
		}


		.select_area {
			width: 100vw;
			padding: 0 32rpx;

			.title {
				height: 60rpx;

				text {
					font-size: 26rpx;
					color: #999999;
				}

				view {
					font-size: 26rpx;
					color: #FD2A53;
				}
			}

			.select_list {
				flex-wrap: wrap;

				.select_item {
					width: 200rpx;
					height: 64rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					margin: 0 8rpx 8rpx;
					position: relative;

					.item_name {
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}

					.item_icon {
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
		}

		.content {
			display: flex;
			flex: 1;
			overflow: hidden;
			width: 100vw;
			overflow: hidden;

			.list {
				height: 100%;
				width: 33.333%;
				overflow: hidden;

				scroll-view {
					height: 100%;
				}

				.item {
					height: 96rpx;
					overflow: hidden;
					padding: 0 32rpx;

					text {
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						flex: 1;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.list1 {
				background: #FFFFFF;
			}

			.list2 {
				background: #F8F8F8;
			}

			.list3 {
				background: #F3F3F3;
			}
		}


	}
</style>